<script setup lang="ts" name="SelectShip">
import { onMounted, ref, watch } from "vue";
import { GetTransportShipList } from "@/api/tally";
import { type ConfigProviderThemeVars, showFailToast } from "vant";
import type { SelectorCol } from "@/utils/interface";

const themeVars: ConfigProviderThemeVars = {
  searchContentBackground: "#ffffff",
  searchPadding: "0px",
  buttonSmallHeight: "30px",
  buttonSmallPadding: "12px",
  buttonDefaultHeight: "35px",
  buttonIconSize: "10px",
  searchBackground: "transparent",
  pickerBackground: "#e5e5e5"
};

const res = ref();
const emit = defineEmits(["isOpen", "selectedShip"]);
const emptyCol = [{ text: "暂无数据", value: "0" }];
const isSearching = ref(false);
const keyword = ref("");
const shipList = ref(emptyCol);
const originShipList = ref([] as any);

onMounted(() => {
  getShipList();
});

watch(
  () => keyword,
  newValue => {
    getShipList();
  },
  { immediate: true, deep: true }
);

function getShipList() {
  const params = {
    keyword: keyword.value
  };

  if (params.keyword.length === 1) {
    return;
  }

  isSearching.value = true;
  GetTransportShipList(params)
    .then((res: any) => {
      shipList.value = emptyCol;
      if (res.success && res.data.length > 0) {
        let colData: SelectorCol[] = [];
        originShipList.value = [];
        originShipList.value = res.data;
        res.data.forEach((i: any) => {
          const item: SelectorCol = {
            text: i.shipInfo,
            value: i.transportShipId
          };
          colData.push(item);
        });
        shipList.value = colData;
      }
      isSearching.value = false;
    })
    .catch(() => {
      isSearching.value = false;
    });
}

function returnRes() {
  if (res.value["0"] === "0") {
    showFailToast("请选择有效船");
    return;
  }
  const data = originShipList.value.filter(
    (i: any) => i["transportShipId"] === res.value["0"]
  )[0];
  emit("selectedShip", data);
  showPop(false);
}

function showPop(show: boolean) {
  emit("isOpen", show);
}
</script>

<template>
  <div class="flex-col h-[auto] p-[20px] w-full" style="background: #f6f6f6">
    <van-config-provider :theme-vars="themeVars">
      <div class="flex h-[30px] justify-between">
        <div
          class="flex justify-center items-center h-full text-center text-base font-bold"
        >
          选择船
        </div>
        <div
          class="flex h-full justify-center items-center text-center text-base"
        >
          <div class="text-blue-500 font-bold" @click="returnRes">确定</div>
        </div>
      </div>
      <div class="flex flex-col w-[100%] flex-1 mt-[10px]">
        <div class="flex w-[100%] h-[40px]">
          <van-search
            class="flex w-[100%]"
            v-model="keyword"
            shape="round"
            placeholder="请输入搜索关键词"
            :clearable="true"
          >
            <!--            <template #action>-->
            <!--              <div class="flex w-full h-full items-center">-->
            <!--                <van-button-->
            <!--                  class="flex"-->
            <!--                  v-if="isSearching"-->
            <!--                  loading-->
            <!--                  type="success"-->
            <!--                  size="small"-->
            <!--                  >搜索</van-button-->
            <!--                >-->
            <!--                <van-button-->
            <!--                  class="flex"-->
            <!--                  v-if="!isSearching"-->
            <!--                  type="success"-->
            <!--                  @click="getShipList"-->
            <!--                  size="small"-->
            <!--                  >搜索</van-button-->
            <!--                >-->
            <!--              </div>-->
            <!--            </template>-->
          </van-search>
        </div>
        <div class="mt-[10px]">
          <van-picker :show-toolbar="false" :columns="shipList" v-model="res" />
        </div>
      </div>
    </van-config-provider>
  </div>
</template>

<style scoped></style>
